<template>
  <div class="my_be_dealt">
    <div class="my_be_dealt_title">
      <!-- {{ allocationObj.title }} -->
      <div class="title">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in allocationObj.tabsNumberList"
            :key="index"
            :label="item.selectValue == 'bisness' ? '商机待办' : '我的待办'"
            style="font-size: 18px"
            :name="item.selectValue"
          >
            <template #label>
              <span class="custom-tabs-label">
                <el-badge
                  :value="item.total"
                  v-if="item.total > 0"
                  class="item"
                >
                  <span>{{
                    item.selectValue == "bisness" ? "商机待办" : "我的待办"
                  }}</span>
                </el-badge>
                <span v-else>{{
                  item.selectValue == "bisness" ? "商机待办" : "我的待办"
                }}</span>
              </span>
            </template>
            <!-- <div v-if="isHome" class="my_be_dealt_content">
                            <li v-for="(item, index) in listData" @click="toDetails(item)" :key="index">
                                <p>{{ item.fullName }}</p>
                                <p>
                                    <span>{{ item.creatorUserId }}</span> |
                                    <span>{{ item.creatorTime | toDate() }}</span>
                                </p>
                            </li>
                        </div> -->
          </el-tab-pane>
          <!-- <el-tab-pane label="配置管理" style="font-size: 18px" name="second">

                    </el-tab-pane> -->
        </el-tabs>
      </div>
      <span class="look_all" @click="lookAll">查看全部</span>
    </div>
    <div v-if="isHome && listData.length > 0" class="my_be_dealt_content">
      <li
        v-for="(item, index) in listData"
        @click="toDetails(item)"
        :key="index"
      >
        <p class="data_title" v-if="activeName == 'bisness'">
          {{ item.customerName }}
        </p>
        <p class="data_title" v-else>{{ item.fullName }}</p>
        <p>
          <!-- <span v-if="activeName=='bisness'">{{ item.creatorUserName }}</span> <span v-else>{{ item.userName }}</span>   -->
          <span>{{ item.creatorTime | toDate("yyyy-MM-dd") }}</span>
        </p>
        <!-- <i class="el-icon-arrow-right icon_data"></i> -->
      </li>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  props: {
    allocationObj: { default: "" },
    isHome: { default: true },
  },
  data() {
    return {
      listData: [],
      activeName: "",
    };
  },

  created() {
    this.activeName = this.allocationObj.tabsNumberList[0].selectValue;
    console.log("myBeDealt-allocationObj", this.allocationObj);

    this.allocationObj.tabsNumberList.forEach((item) => {
      this.getData(item);
    });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name, event);
      this.allocationObj.tabsNumberList.forEach((item) => {
        if (item.selectValue == tab.name) {
          console.log(item, "----");
          this.getData(item);
        }
      });
    },
    getData(item) {
      this.listData = [];
      request({
        url: item.port,
        method: item.selectValue == "bisness" ? "post" : "get",
        data: {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          switchType: "examine",
        },
      }).then((res) => {
        let _this = this;
        console.log(res);
        // this.listData = res.data.list
        if (this.activeName == item.selectValue) {
          if (res.data.list.length > 6) {
            this.listData = res.data.list.slice(0, 7);
          } else {
            this.listData = res.data.list;
          }
        }
        this.allocationObj.tabsNumberList.forEach((el, index) => {
          if (el.selectValue == item.selectValue) {
            if (res.data.pagination) {
              this.$set(
                this.allocationObj.tabsNumberList[index],
                "total",
                res.data.pagination.total
              );
            } else {
              this.$set(this.allocationObj.tabsNumberList[index], "total", 0);
            }
          }
        });
      });
    },
    toDetails(item) {
      console.log(item);
      //   if (this.activeName == "bisness") {
      //     this.$router.push({
      //       path: "/crm/crmcustomeropportunity",
      //       query: {
      //         id: item.id,
      //       },
      //     });
      //   } else {
      // item.taskId = item.id
      // let config = JSON.stringify(item);
      // console.log('-----', JSON.parse(config))
      // const Base64 = require("js-base64").Base64;
      // this.$router.push({
      //     path: "/workFlow/flowTodo",
      //     query: {
      //     ischeck: true,
      //     bodyText: config,
      //     taskOperatorId: item
      //         .taskOperatorId,
      //     },
      // });
      let config = JSON.stringify(item);
      const Base64 = require("js-base64").Base64;
      this.$router.push("/workFlow/flowTodo?config=" + config);
      // }
    },
    lookAll() {
      if (this.activeName == "bisness") {
        this.$router.push({
          path: "/crm/crmcustomeropportunity",
        });
      } else {
        this.$router.push({
          path: "/workFlow/flowTodo",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
>>> .el-tabs__item {
  font-size: 15px !important;
  font-weight: 400 !important;
  font-family: "PingFang SC" !important;
}
>>> .el-tabs__nav-wrap::after {
  background-color: #fff !important;
}
.my_be_dealt {
  height: 100%;
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;

  .my_be_dealt_title {
    font-family: "PingFang SC";
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 24px;
    .title {
      display: inline-block;
      width: 200px;
      position: relative;
      top: -5px;
    }
    .look_all {
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 14px;
      color: #acadad;
      line-height: 27px;
      float: right;
      cursor: pointer;
    }
    .look_all:hover {
      color: #008dff;
    }
    //   padding: 0 10px;
  }
  .my_be_dealt_content {
    // height: calc(100% - 54px);
    // padding: 20px 0;
    // margin-top: 20px;
    overflow-y: auto;
    li {
      border-radius: 6px;
      list-style-type: none;
      padding: 1px 10px;
      // border: 1px solid #e6f2fe;
      // margin-bottom: 15px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      line-height: 36px;
      p:nth-child(1) {
        font-family: PingFangSC;
        font-weight: 400;
        font-size: 14px;
        width: calc(100% - 100px);
        float: left;
        color: #030303;
        // line-height: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      p:nth-child(2) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #acadad;
        float: right;
        // line-height: 24px;
      }
    }
    // li:hover {
    //   color: #008dff;
    //   // box-shadow: 0px 3px 13px 0px rgba(185, 207, 239, 0.45);
    // }
    .beforStyle {
      position: relative;
      left: 15px;
    }
    .beforStyle::before {
      content: "";
      background-color: #acadad;
      width: 1px;
      height: 10px;
      // padding: 0 10px;
      position: absolute;
      left: -7px;
      top: 14px;
      margin-top: -9px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
    }
    .data_title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .data_title:hover {
      color: #008dff;
    }
    .icon_data {
      position: absolute;
      color: #acadad;
      right: 12px;
      top: 26px;
      font-size: 15px;
    }
  }
}
>>> .el-badge__content.is-fixed {
  top: 7px;
  line-height: 16px;
}
</style>
